<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=`, initial-scale=1.0">
    <title>Vue 实例对象 </title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        #app{
            text-align: center;
        }
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div ref="one" >
            {{msg}}
        </div>
        <div>
            txt --- {{txt}}
        </div>
        <p>
            <input type="text" v-model="txt">
        </p>
        <div v-on:click="a++">
            <h4> a = {{a}} <span>1111</span></h4>
            <h5>b = {{b}} </h5>
        </div>
    </div>

    
    <script>
        // Object 的静态方法 
        // Object.freeze()  冻结  v-once 
        // Object.keys
        // Object.values
        // Object.assign 

        const data = {
            msg:"Vue 实例对象 vm",
            txt:"Vue 把DOM和数据一一对应丢到 Vue 响应式系统 ",
            a:10,
            b:1000,
        }

        // Object.freeze(data)  
        // new Vue(选项对象)
        let count = 0;
        const vm = new Vue({
            // el: "#app",
            data:data,
            watch:{

            },
            computed:{},
            methods:{
                log(msg){
                    console.log(`## ${++count}  --- ${msg}`)
                }
            },
            beforeCreate(){
                // this.log('beforeCreate 实例创建之前')
                console.log(`## ${++count}  --- beforeCreate 实例创建之前`)
            },
            created(){
                this.log("created 实例创建完毕")
                
            },
            beforeMount(){
                this.log("beforeMount 实例载入之前")
                // 虚拟DOM
                console.log(this.$refs.one)   // 这个标签还没有被载入 
                // this.$refs.one.style.color = "red"
            },
            mounted(){
                // 真实DOM  
                this.log("mounted 实例载入完成") 
                this.$refs.one.style.color = "red"
                this.$refs.one.style.fontSize = "40px"
            },
            beforeUpdate(){
                this.log("beforeUpdate  实例数据更新之前")
            },
            updated(){
                this.log("updated  实例数据更新完成")
            },
            beforeDestroy(){
                this.log("beforeDestroy  实例被销毁之前")
            },
            destroyed(){
                this.log("destroyed  实例被销毁完成")
                // 回收垃圾 
                // 清除计数器  清除缓存 
            }
        }).$mount("#app")  // 挂载实例对象  
    </script>

     <!-- 
        每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的
        设计模式  (工厂模式  单例模式  混合模式  观察者模式  发布订阅模式 )

        数据开发模式模型 
        MVVM  M  model 数据模型  V  view 视图界面  VM  viewmodel 视图和数据混淆在一起(数据视图系统)
        MVC   M  model 数据模型  V  view 视图界面  C   controller 控制器 (JS逻辑 方法和事件)
        MVP   M  model 数据模型  V  view 视图界面  P   Prestener  复杂逻辑   



        选项对象   {} 
        选项对象属性 (data el  methods name watch computed filter component directive 10个生命周期钩子函数) 
        
        vm 
        实例对象  vm   Vue.prototype   vm.__proto__ 
        实例属性  vm.$data  vm.$el  
        实例方法 / 数据    vm.$4     vm.$set
        实例方法 / 事件   vm.$emit     vm.$on    
        实例方法 / 生命周期   vm.$nextTick  vm.$mount()   vm.$forceUpdate (强制刷新页面)
        el  vue挂载元素  $mount("#app") 

        data 对象 
        响应式系统  (只要检测到数据更新,就一定会去修改视图 )    组件系统 
        1. 当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中
        2. 当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值 (响应式)

        vm 实例化后赋值  没有意义  没有被响应式视图系统监听

        所有需要用到的数据都必须在data 里面初始化 否则没有响应式监听 
        借鉴 MVVM

        VM 实例对象  
        实例属性 
        vm.$el     
        vm.$data    
        实例方法  
        vm.$watch  监听数据改变
        vm.$set    修改对象和数据刷新视图
        vm.$delete  删除对象和数组 刷新视图   

        
        ref  用来记录真实DOM  this.$refs 
        a. ref 用于标签 表示这个真实DOM 对象
        b. ref 用于组件 表示这个组件对象 
        
        初始化操作  
        window.onLoad = function(){}
        document.ready = function(){}

        $(function(){

        })

        实例生命周期钩子 
        每个 Vue 实例在被创建时都要经过一系列的过程
        (实例创建  实例载入  实例更新  实例销毁 )
        这些过程称为 实例生命周期   Vue 会在这个每个周期设置对应的函数去监听  这些函数就叫  生命周期钩子函数
        Vue 内置一些生命周期钩子函数(function )   给了开发者在不同阶段添加自己的代码的机会

        实例创建   beforeCreate   created   1       实例初始化创建 
        实例载入   beforeMount    mounted   1       初始化载入
        实例更新   beforeUpdate   updated   n       实例 里面  data  数据改变 
        实例销毁   beforeDestroy  destroyed  1      实例被移除 
        
        activated   激活
        deactivated 失活  
        errorCaptured  错误捕获 


        真实DOM  ref 
        Vue  创建实例之前 DOM树 先读取根元素 解析 所有的dom数据标签  然后以  树形结构 把dom数据存储在内存 (模板存储DOM)
        在内存中 描述 dom节点 的 数据信息  叫做 虚拟DOM 
        抽象定义 
        虚拟DOM  Virtual DOM   (性能优化)     
        
        优势  提升性能 提高加载速度 
        缺点  多了一次 虚拟DOM 初始化的计算 (尽量第一次不要加载过多的数据 )

        

        数据更新 patch  diff算法  比较不同 

        如果每次data 改变 也就是数据更新  
        Vue (核心DIfferent 算法) 监测到数据改变  自动生成 新的虚拟DOM  
        

        会去和 旧的虚拟DOM 进行对比  得到变更的部分 patch 
        然后会把这 patch 放到一个队列  最终批量更新  渲染成真实DOM  

        
     -->
</body>
</html>